<template lang="pug">
  view
    view.product-header
      view.product-header-left
        view.left-Header
          aImage.left-Header-img(mode="aspectFill" :width="100" :height="100" :src="shopInfo.logo" alt="/static/img/common/empty.png")
        view.left-text {{shopInfo.name}}
      view.product-header-right
    view.product-col 全部商品
    view.product-list
      view.product2(v-for="(goods) in productList"  :key="goods.key"  @tap="toGoods(goods)")
        image(mode="scaleToFill" :src="goods.pic + $pictureResolution(0, 375)" webp)
        view.solan
          view.name {{goods.name}}
          view.sub_title {{goods.subTitle}}
          view.info
            view.price 价格:¥{{goods.price}}
</template>

<script>
import aImage from "../../../components/a-image/a-image";
import {mapState, mapActions, mapMutations, mapGetters} from "vuex"

//高德SDK
export default {
  components: {
    aImage
  },
  computed: {
    ...mapState('shopPage', ['shopId', 'shopInfo']),
    ...mapState("shopPage/list", ['finish']),
    ...mapGetters('shopPage', ['productList']),
  },
  onLoad(option) {
    this.setShopId(option.shopid)
    this.getPageData();
  },
  methods: {
    ...mapMutations("shopPage", ['setShopId']),
    ...mapActions("shopPage", ['fetchShopDetails', 'fetchList', 'fetchNextData']),
    async getPageData() {
      uni.showLoading({title: "加载中..."});
      await Promise.all([
        this.fetchShopDetails(),
        this.fetchList()
      ]);
      uni.hideLoading();
    },
    toGoods(goods) {
      const {shopId, id} = goods
      uni.navigateTo({
        url: '../../goods/goods?cid=' + id + "&shopId=" + shopId
      });
    }
  },
  onReachBottom() {
    if (!this.finish) {
      this.fetchNextData();
    }
  },
};
</script>
<style lang="scss">
@import "./shop";
</style>
